<template>
    <view class="container" :style="themeColor">
        <tab-bar :tabs="items" nobg="nobg" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
        <view class="main">
            <swiper
                class="swiper product-main-list"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(swiperItem, swiperIndex) in items" :key="swiperIndex">
                    <scroll-view scroll-y class="scroll" v-if="tabIndex == 0">
                            <view class="order-submit-list">
                                <view class="order-item">
                                    <view class="order-submit-item" v-for="(item, index) in listData" :key="index" :item="item">
                                        <view class="item-top">
                                            <image
                                                v-if="!getAppSet().isHideImg"
                                                class="product-img"
                                                :src="
                                                    item.ProductImage
                                                        ? easyGetImgUrl(item.ProductImage)
                                                        : '/static/img/no-img.jpg'
                                                "
                                                mode="aspectFill"></image>
                                            <view class="product-info">
                                                <text class="product-name">{{ item.ProductName }}</text>
                                                <view class="no-worry-item" v-if="item.QAList && item.QAList.length > 0">
                                                    <view class="no-worry-box">
                                                        <text
                                                            class="no-worry-text"
                                                            :class="{ 'last-no-worry-text': qaIndex == item.QAList.length - 1 }"
                                                            v-for="(qaItem, qaIndex) in item.QAList"
                                                            >{{ qaItem.Description }}</text
                                                        >
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                        <block v-for="subitem in item.SubItems">
                                            <view class="item-center">
                                                <view class="pro-item">
                                                    <view class="left">
                                                        <text class="label" v-if="subitem.DisplayAttribute"
                                                            ><text class="specification">{{
                                                                subitem.DisplayAttribute ? subitem.DisplayAttribute : "默认规格"
                                                            }}</text></text
                                                        >
                                                        <text class="label">
                                                            <text class="price-bold"
                                                                >￥{{
                                                                    parseFloat(
                                                                        Number(subitem.Price).toFixed(subitem.PriceDigits),
                                                                    )
                                                                }}</text
                                                            >
                                                            <text class="value product-num"
                                                                >x{{
                                                                    parseFloat(
                                                                        Number(subitem.Amount).toFixed(subitem.NumDigits),
                                                                    )
                                                                }}{{
                                                                    subitem.UnitName ? subitem.UnitName : subitem.DefaultUnit
                                                                }}</text
                                                            >
                                                        </text>
                                                    </view>
                                                    <view class="right">
                                                        <text class="value price-text"
                                                            >小计：￥{{ (subitem.Amount * subitem.Price).toFixed(2) }}</text
                                                        >
                                                    </view>
                                                </view>
                                            </view>
                                            <view
                                                class="remarkmenu"
                                                v-if="subitem.Remark || subitem.CustomForm"
                                                @click="goUrlremark(subitem)">
                                                <view>备注/表单</view>
                                                <view>
                                                    <text v-if="subitem.Remark || subitem.CustomForm">已填写</text>
                                                    <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                                                </view>
                                            </view>
                                        </block>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    
                    <deliver-list
                        v-if="loadOk && tabIndex !== 0"
                        :ref="'productList_' + swiperIndex"
                        :height="listHeight"
                        :state="swiperItem.state"
                        :orderId="orderId"></deliver-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import deliverList from "@/pages_shop/components/order/deliver-list.vue"
import tabBar from "@/components/common/tab-bar.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { getOrderDetail } from "@/service/api/order.js"
export default {
    components: {
        deliverList,
        tabBar,
    },
    data() {
        return {
            optEmpty: {
                icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                tip: "~ 暂无数据 ~", // 空提示
            },
            isloadding: false,
            tabIndex: 0,
            items: [
                {
                    state: "0",
                    title: "商品清单",
                },
                {
                    state: "1",
                    title: "已发货",
                },
                {
                    state: "2",
                    title: "未发货",
                },
            ],
            listHeight: "", //list所需高度
            loadOk: false,
            searchKey: "",
            orderId: "",
            detailList: [],
            listData: {},
        }
    },
    watch: {
        //监听更新
        getUpOrderView(e) {
            this.refresh()
        },
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onLoad(e) {
        this.tabIndex = e.tabIndex
        this.orderId = e.orderId
        if(e.tabIndex == 0){
            this.getDetail()
        }
        
    },
    onShow() {},
    mounted() {
        this.getListHeight()
    },
    methods: {
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
            if(index == 0){
                this.getDetail()
            }
        },
        getDetail() {
            let param = {
                orderId: this.orderId,
            }
            this.isLoading = true
            getOrderDetail(param).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data.OrderDetail
                    if (res.Data.OrderInvoice) {
                        this.invoiceId = res.Data.OrderInvoice.ID
                    }
                    this.detailList = this.data.DetailList
                    this._dataformat(this.detailList)
                    let statelist = this.data.StateProgressData
                    this.statelist = statelist.reverse()
                    this.statelist.forEach((e, index) => {
                        if (this.data.StateName == e.StateName) {
                            this.stateCurrent = index
                        }
                    })
                    this.getImageList(this.data.DetailList)
                    this.isLoading = false
                    // if (this.data.State == 6 || this.data.State == 10) {
                    //     this.GetOrderImg()
                    // }
                }
            })
        },
        _dataformat(data) {
            let items = []
            data.forEach((e) => {
                let filterItem = items.filter((item) => {
                    return item.ProductId == e.ProductId
                })
                if (filterItem.length < 1) {
                    let SubItems = []
                    SubItems.push(e)
                    let obj = {
                        ProductId: e.ProductId,
                        ProductName: e.Name,
                        ProductImage: e.ProductImage,
                        Attribute: e.DisplayAttribute,
                        SubItems: SubItems,
                        QAList: e.QAList,
                    }
                    items.push(obj)
                } else {
                    filterItem[0].SubItems.push(e)
                }
            })
            this.listData = items
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    arr.push(e.ProductImage)
                })
            }
            if (list.length == 1) {
                this.itemname = list[0].Name
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
        },
        goUrlremark(item) {
            this.easyGoTo(
                "/pages_shop/packet/order/remark?productdata=" + encodeURIComponent(JSON.stringify(item)) + "&from=1",
            )
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
.order-submit-list {
    // background-color: $color-white;
    border-radius: $border-radius-10;
    margin-top: 24rpx;
    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        .label-text {
            flex: 1;
        }
    }
    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}
.order-submit-item {
    background-color: $color-white;
    display: flex;
    flex-direction: column;
    margin-bottom: 12rpx;
    padding-bottom: 14rpx;
    padding: 24rpx;
    .item-top {
        display: flex;
        flex-direction: row;

        .product-img {
            width: 136rpx;
            height: 136rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-text-mian;
                flex: 1;
                display: flex;
                align-items: center;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
            .no-worry-item {
                .no-worry-box {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    border-radius: 4rpx;
                    background: #fff8f8;
                    padding: 8rpx;
                    .no-worry-text {
                        position: relative;
                        margin-right: 20rpx;
                        padding-left: 10rpx;
                        margin-bottom: 4rpx;
                        font-size: $font-size-22;
                        color: #db0032;
                        &:after {
                            content: " ";
                            position: absolute;
                            right: -16rpx;
                            top: 14rpx;
                            width: 6rpx;
                            height: 6rpx;
                            border-radius: 20rpx;

                            background-color: #db0032;
                        }
                    }
                    .last-no-worry-text {
                        &:after {
                            background-color: $transparent;
                        }
                    }
                }
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}
.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }
            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }
        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}
.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;
    text {
        color: $color-gray-3;
    }
}
.scroll {
	height: calc(100vh - 220rpx);
}
</style>
